<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改文字的样式</title>
		<style>
			.on{
				color:firebrick;
				font-size: 80px;
				font-family: "草书";
				border: 2px solid red;
				height: 450px;
			}
			.out{
				color:black;
				font-size: 14px;
				font-family: "楷体";
				border:none;
				height: 100px;
			}
		</style>
		<script>
			function changeStyle(d){
				d.className="on";
				
				// d.style.color="firebrick";
				// d.style.fontSize="80px";
				// d.style.fontFamily="草书";
				// d.style.border="2px solid red";
				// d.style.height="450px";
				console.log(d.style.height);//只能读行内样式
			}
			function resetStyle(d){
				d.className="out";//不需要那个.
				// d.style.color="black";
				// d.style.fontSize="12px";
				// d.style.fontFamily="宋体";
				// d.style.border="none";
			}
			function getAdvheight(t){
				let d=t.nextElementSibling;
				alert(d.style.height);
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="getAdvheight(this)">获得div高度</button>
		<div onmouseover="changeStyle(this)" id="adv" onmouseout="resetStyle(this)">
			教育改变生活
		</div>
	</body>
</html>